<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="800px" :title="`${dialogVProps.title}门店用餐时段`">
    <div :style="{ marginTop: '-20px' }">
      <ProTable
        ref="proTable"
        row-key="id"
        :columns="columns"
        :data="dialogVProps.list"
        :pagination="false"
        :tool-button="false"
        :border="false"
        size="small"
      >
        <template #index="scope">
          <el-text>{{ "餐段" + (Number(scope.$index) + 1) }}</el-text>
        </template>
        <template #name="scope">
          <el-input v-model="scope.row.name" />
        </template>
        <template #starTime="scope">
          <el-time-picker class="w100" v-model="scope.row.starTime" format="HH:mm" value-format="HH:mm" />
        </template>
        <template #endTime="scope">
          <el-time-picker class="w100" v-model="scope.row.endTime" format="HH:mm" value-format="HH:mm" />
        </template>
        <template #status="scope">
          <el-switch v-model="scope.row.status" />
        </template>
      </ProTable>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogVProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="TimeIntervalDialog">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Operation } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";

const proTable = ref<ProTableInstance>();
interface DialogVProps {
  title: string;
  isView: boolean;
  list: Partial<Operation.ResDepartmentList>[];
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const dialogVisible = ref(false);
const dialogVProps = ref<DialogVProps>({
  isView: false,
  title: "",
  list: []
});

const columns: ColumnProps<Operation.ResDepartmentList>[] = [
  { prop: "index", label: "序号", width: 80 },
  { prop: "name", label: "餐段名称", align: "left" },
  { prop: "starTime", label: "开始时间", align: "left" },
  { prop: "endTime", label: "结束时间", align: "left" },
  { prop: "status", label: "是否启用", fixed: "right" }
];

// 接收父组件传过来的参数
const acceptParams = (params: DialogVProps) => {
  dialogVProps.value = params;
  dialogVisible.value = true;
};

// 提交数据（新增/编辑）
// const ruleFormRef = ref<FormInstance>();
const handleSubmit = async () => {
  await dialogVProps.value.api!(dialogVProps.value.list);
  ElMessage.success({ message: `${dialogVProps.value.title}部门餐段成功！` });
  dialogVProps.value.getTableList!();
  dialogVisible.value = false;
};

defineExpose({
  acceptParams
});
</script>
